<template>
  <!-- <img class="banner" src="../../../assets/list/four-banner.png" /> -->
  <div class="btn-box ui-center">
    <div class="item item-1" @click="Jump('/listSpaceList?tabActive=0&categoryId=1')">
      <div class="more-mask">
        <div class="more"></div>
      </div>
    </div>
    <div class="item item-5" @click="Jump('/listSpaceList?tabActive=0&categoryId=5')">
      <div class="more-mask">
        <div class="more"></div>
      </div>
    </div>
    <div class="item item-2" @click="Jump('/listSpaceList?tabActive=0&categoryId=2')">
      <div class="more-mask">
        <div class="more"></div>
      </div>
    </div>
    <div class="item item-3" @click="Jump('/listSpaceList?tabActive=0&categoryId=3')">
      <div class="more-mask">
        <div class="more"></div>
      </div>
    </div>
    <div class="item item-4" @click="Jump('/listSpaceList?tabActive=0&categoryId=4')">
      <div class="more-mask">
        <div class="more"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { router } = inject('global');
// 页面跳转
const Jump = url => {
  router.push(url);
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 510px;
  object-fit: cover;
  display: block;
}
.btn-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 50px 30px;
  padding: 50px 0 120px 0;
  .item {
    position: relative;
    height: 267px;
    box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    &:hover {
      .more-mask {
        display: block;
      }
    }
    &.item-1 {
      @include bgImg('@/assets/list/four-1.png');
    }
    &.item-2 {
      @include bgImg('@/assets/list/four-2.png');
    }
    &.item-3 {
      @include bgImg('@/assets/list/four-3.png');
    }
    &.item-4 {
      @include bgImg('@/assets/list/four-4.png');
    }
    &.item-5 {
      @include bgImg('@/assets/list/four-5.png');
    }
    .more-mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      .more {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #f6d1bf;
        line-height: 35px;
        &::after {
          content: '';
          display: block;
          width: 34px;
          height: 47px;
          @include bgImg('@/assets/list/more.png');
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
